import { Fragment } from "react";
import { Canvas, Story, Meta } from "@storybook/addon-docs";
import { Box, Grid, List, Icon } from "metabase/ui";

export const args = {
  size: "md",
  type: "ordered",
  withPadding: false,
};

export const sampleArgs = {
  size: "md",
  type: "ordered",
  withPadding: false,
};

export const argTypes = {
  size: {
    options: ["xs", "sm", "md", "lg"],
    control: { type: "inline-radio" },
  },
  type: {
    options: ["ordered", "unordered"],
    control: { type: "inline-radio" },
  },
  withPadding: {
    control: { type: "boolean" },
  },
};

<Meta
  title="Typography/List"
  component={List}
  args={args}
  argTypes={argTypes}
/>

# List

Our themed wrapper around [Mantine List](https://v6.mantine.dev/core/list/).

export const DefaultTemplate = args => (
  <List {...args}>
    <List.Item>Clone or download repository from GitHub</List.Item>
    <List.Item>Install dependencies with yarn</List.Item>
    <List.Item>To start development server run npm start command</List.Item>
    <List.Item>
      Run tests to make sure your changes do not break the build
    </List.Item>
    <List.Item>Submit a pull request once you are done</List.Item>
  </List>
);

export const Default = DefaultTemplate.bind({});

<Canvas>
  <Story name="Default">{Default}</Story>
</Canvas>

export const WithIconsTemplate = args => {
  return (
    <List {...args} icon={<Icon name="check" />}>
      <List.Item>Clone or download repository from GitHub</List.Item>
      <List.Item>Install dependencies with yarn</List.Item>
      <List.Item>To start development server run npm start command</List.Item>
      <List.Item icon={<Icon name="alert" />}>
        Run tests to make sure your changes do not break the build
      </List.Item>
      <List.Item icon={<Icon name="add" />}>
        Submit a pull request once you are done
      </List.Item>
    </List>
  );
};

export const WithIcons = WithIconsTemplate.bind({});

<Canvas>
  <Story name="WithIcons">{WithIcons}</Story>
</Canvas>
